<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS3实现动态信封折叠留言样式</title>
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://www.lanrenzhijia.com/ajaxjs/1.3.2/jquery-1.3.2.min.js"></script>
		<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css">

		<style>
			.character {
				padding-left: 700px;
				max-width: 300px;
				transform: rotate(-3deg);
				-ms-transform: rotate(-3deg);
				/* IE 9 */
				-moz-transform: rotate(-3deg);
				/* Firefox */
				-webkit-transform: rotate(-3deg);
				transition: all 0.5s;
				-webkit-transition: all 0.5s;
				-moz-transition: all 0.5s;
			}
			
			.character:hover {
				transform: rotate(3deg);
				-ms-transform: rotate(3deg);
				/* IE 9 */
				-moz-transform: rotate(3deg);
				/* Firefox */
				-webkit-transform: rotate(3deg);
			}
			
			.test {
				width: 300px;
				margin-left: 400px;
				padding: 80px 20px;
				background: #beceeb;
				-webkit-border-top-left-radius: 220px 120px;
				-webkit-border-top-right-radius: 220px 120px;
				-webkit-border-bottom-right-radius: 220px 120px;
				-webkit-border-bottom-left-radius: 220px 120px;
				-moz-border-radius: 220px / 120px;
				border-radius: 220px / 120px;
				position: relative;
				text-align: center;
				font-size: x-large;
				color: #FFFFFF;
			}
			
			.test span {
				width: 0;
				height: 0;
				font-size: 0;
				background: #beceeb;
				overflow: hidden;
				position: absolute;
			}
			
			.test span.bot {
				width: 30px;
				height: 30px;
				-moz-border-radius: 30px;
				-webkit-border-radius: 30px;
				border-radius: 30px;
				right: 10px;
				bottom: -20px;
			}
			
			.test span.top {
				width: 15px;
				height: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
				border-radius: 15px;
				right: 0px;
				bottom: -40px;
			}
			
			.but #begin {
				background: transparent;
				font-weight: bold;
				border-style: solid;
				border-radius: 10%;
				outline: none;
				height: 50px;
				opacity: 0.8;
				position: fixed;
				bottom: 0;
				right: 0;
			}
			
			#begin:hover {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="petalbox"></div>
		<div class="but">
			<button id="begin">点我~我是彩蛋∠( °ω°)／ </button>
		</div>
		<div class="test">
			<span class="bot"></span>
			<span class="top"></span>小五祝阿鸡 生日快乐~
		</div>
		<div class="img">
			<img class="character" src="images/xiaowu.png" />
		</div>

		<div id="wrap">
			<div id='form_wrap'>
				<form>
					<p style="font-size: 18px;">祝阿鸡：
						<br>　　又向三十大关迈进了一大步~hhh~
						<br>希望你能在成为一名好医生的道路上一路向西， 虽然学医可能救不了中国，但是却可以拯救广大人民濒危的发际线和千千万万程序猿脆弱的老腰(╥╯^╰╥)，所以阿鸡一定要好好努力~
						<br>
						<br>然后正在慌得一比的备考党在这里预祝你明年（还是后年？）能达到自己想要的目标吧~
						<br>
						<br>最后~页面里个小彩蛋(≖ᴗ≖)✧
						<br />
						<br />　　　——来自小五的不知所云的祝福ㄟ( ▔, ▔ )ㄏ
					</p>
				</form>
			</div>
		</div>
		<script src="js/hb.js"></script>
	</body>

</html>